<template>
    <div class="order">
        <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
            <el-table-column prop="courseTitle" label="课程名称">
            </el-table-column>
            <el-table-column prop="resPrice" label="金额" width="150">
            </el-table-column>
            <el-table-column label="状态" width="100">
                <template slot-scope="scope">
                    <el-link type="primary" :underline="false" v-if="scope.row.paymentStatus == 1">未支付</el-link>
                    <el-link type="success" :underline="false" v-else-if="scope.row.paymentStatus == 2">已支付</el-link>
                    <el-link type="danger" :underline="false" v-else="scope.row.paymentStatus == 3">已失效</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="250">
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="more(scope.row.id)" type="text" size="small">
                        查看详情
                    </el-button>
                    <el-button @click.native.prevent="pay(scope.row.id)" type="text" size="small"
                        v-if="scope.row.paymentStatus == 1">
                        支付
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pag">
            <el-pagination background layout="prev, pager, next" :total="totalCount" :current-page="currPage"
                :page-size="pageSize">
            </el-pagination>
        </div>


        <el-dialog title="订单详情" :visible.sync="dialogVisible" width="30%">
            <div v-loading="infoLoading">
                <div class="order-dialog-item">
                    <span>订单编号</span>
                    <span>{{ orderInfo.id }}</span>
                </div>
                <div class="order-dialog-item">
                    <span>课程名称</span>
                    <span>{{ orderInfo.courseTitle }}</span>
                </div>
                <div class="order-dialog-item">
                    <span>原价</span>
                    <span>{{ orderInfo.price }}</span>
                </div>
                <div class="order-dialog-item">
                    <span>优惠券金额</span>
                    <span>{{ orderInfo.cutPrice }}</span>
                </div>
                <div class="order-dialog-item">
                    <span>最终金额</span>
                    <span>{{ orderInfo.resPrice }}</span>
                </div>
                <div class="order-dialog-item">
                    <span>支付方式</span>
                    <span>{{ orderInfo.type == 1 ? '支付宝' : "微信" }}</span>
                </div>
                <div class="order-dialog-item">
                    <span>创建时间</span>
                    <span>{{ orderInfo.createTime }}</span>
                </div>
                <div class="order-dialog-item">
                    <span>支付时间</span>
                    <span>{{ orderInfo.paymentTime }}</span>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { reqUserCourseOrderList, reqUserCourseOrderInfo } from "@/api/course"
import { reqPayment } from "@/api/pay"

export default {
    name: "user-order",
    data() {
        return {
            tableData: [],
            orderInfo: {},
            dialogVisible: false,
            loading: false,
            infoLoading: false,
            currPage: 1,
            pageSize: 10,
            totalCount: 0,
        }
    },
    mounted() {
        this.getUserCourseOrderList();
    },
    methods: {
        getUserCourseOrderList() {
            this.loading = true;
            reqUserCourseOrderList().then((res) => {
                this.tableData = res.data.list;
                this.pageSize = parseInt(res.data.pageSize);
                this.currPage = parseInt(res.data.currPage);
                this.totalCount = parseInt(res.data.totalCount);
                this.loading = false
            }).catch((error) => {
                this.loading = false
                this.$message.error(error.message)
            })
        },
        more(id) {
            this.dialogVisible = true;
            this.infoLoading = true;
            reqUserCourseOrderInfo({ courseOrderId: id }).then((res) => {
                this.orderInfo = res.data;
                this.infoLoading = false
            }).catch((error) => {
                this.infoLoading = false
                this.$message.error(error.message)
            })
        },
        pay(id) {
            this.loading = true;
            reqPayment(id).then((res) => {
                this.loading = false
                // 将接口返回的Form表单显示到页面
                document.querySelector('body').innerHTML = res.data;
                // 调用submit方法
                document.forms[0].submit()
            }).catch((error) => {
                this.loading = false
                this.$message.error(error.message)
            })
        }
    },
}
</script>

<style scoped>
.order {
    padding: 0 20px;
}

.pag {
    text-align: center;
}

.order-dialog-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
}
</style>